<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>

    <ion-header translucent id="header">
      <ion-toolbar style="display: none" id="toolbar2">
        <ion-title>Hidden Toolbar</ion-title>
      </ion-toolbar>
      <ion-toolbar>
        <ion-title>Content</ion-title>
      </ion-toolbar>
    </ion-header>

    <div style="display: flex; flex: 1">
      <ion-content padding fullscreen text-center style="flex: 2" id="content">
        <f></f>
        <ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
        <p>
          <ion-button onclick="toggleDisplay('header')" color="secondary">Toggle header</ion-button>
          <ion-button onclick="toggleDisplay('footer')" color="secondary">Toggle footer</ion-button>
          <ion-button onclick="toggleDisplay('toolbar2')" color="secondary">Toggle 2nd toolbar</ion-button>
        </p>
        <p>
          <ion-button onclick="toggleDisplay('content2')" color="danger">Toggle bottom content</ion-button>
          <ion-button onclick="toggleDisplay('content3')" color="danger">Toggle right content</ion-button>
        </p>
        <p>
          <ion-button onclick="myanimation()" color="dark">Animate</ion-button>
        </p>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
      </ion-content>
      <ion-content padding style="display: none" id="content3">
        <f></f>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
        <f></f>
      </ion-content>
    </div>

    <ion-content padding style="display: none" id="content2">
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
    </ion-content>

    <ion-footer id="footer">
      <ion-toolbar>
        <ion-title>Footer</ion-title>
      </ion-toolbar>
    </ion-footer>

    <script>
      const content = document.getElementById('content');
      content.scrollEvents = true;
      content.addEventListener('ionScrollStart', () => console.log('scroll start'));
      content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
      content.addEventListener('ionScrollEnd', () => console.log('scroll end'));


      function toggleFullscreen() {
        const content = document.getElementById('content');
        content.fullscreen = !content.fullscreen;
        console.log('content.fullscren =', content.fullscreen);
      }
      function toggleDisplay(id) {
        const el = document.getElementById(id);
        el.style.display = (!el.style.display) ? 'none' : null;
      }
      function myanimation() {
        const content = document.getElementById('content');
        const header = document.getElementById('header');
        const footer = document.getElementById('footer');
        content.classList.add('animation');
        header.classList.add('animation');
        footer.classList.add('animation');
      }
    </script>

    <style>
      ion-header.animation,
      ion-footer.animation,
      ion-content.animation {
        animation: ani1 5s infinite;
      }

      #content2 ion-scroll {
        background: black;
      }

      @keyframes ani1 {
        0% {
          transform: translateX(0)
        }
        25% {
          transform: translateX(-100%)
        }
        50% {
          transform: translateX(0)
        }
        75% {
          transform: translateX(100%)
        }
        100% {
          transform: translateX(0%);
        }
      }

      ion-content.animation {
        animation-delay: 500ms;
      }

      ion-footer.animation {
        animation-delay: 1000ms;
      }

      .toolbar-background {
        background: #f8f8f8b8;
      }

      f {
        display: block;
        margin: 15px auto;
        max-width: 150px;
        height: 150px;
        background: blue;
      }

      f:last-of-type {
        background: yellow;
      }

    </style>
  </ion-app>
</body>

</html>
